import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';
import ReactDOM from 'react-dom';

import { hidePathInputBar, updatePathInputBar } from '../../actions/path-input-bar-actions.js';
import { hideConfirmDeleteDialog } from '../../actions/confirm-delete-dialog-actions.js';

/**
 * 确认删除提示框
 * @class {ConfirmDeleteDialog}
 * @extends {React.Component}
 */
@connect(state => ({
    confirmDeleteDialog: state.confirmDeleteDialog
}))
export default class ConfirmDeleteDialog extends Component {

    /**
     * 加载后自动高亮
     */
    handleAfterOpen = () => {
        ReactDOM.findDOMNode(this.refs.pathInputBox).focus();
    };

    render() {
        const { confirmDeleteDialog, dispatch } = this.props;
        const type = confirmDeleteDialog.isDir ? '文件夹' : '文件';

        return (
            <Modal isOpen={confirmDeleteDialog.isOpen}
                className="modal confirm-delete-dialog"
                contentLabel="Example Modal"
                overlayClassName="modal-dialog-overlay middle">
                <div className="dialog-header">
                    <h2>删除{type}</h2>
                </div>
                <div className="dialog-content">
                    <p>确认删除{type} "{confirmDeleteDialog.path}" 么?</p>
                </div>
                <div className="dialog-actions">
                    <button type="button"
                        onClick={() => dispatch(hideConfirmDeleteDialog())}>
                        取消
                    </button>
                    <button type="button"
                        onClick={() => dispatch(hideConfirmDeleteDialog(true))}>
                        确定
                    </button>
                </div>
            </Modal>
        );
    }
}